<!--
 * @Author: Kenvie
 * @Blog: kenvie.com
 * @Date: 2022-04-04 22:54:39
 * @LastEditors: Kenvie
 * @LastEditTime: 2022-04-05 11:08:59
 * @FilePath: \Lighthouse\static\html\6.html
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>弹性标签动画</title>
  <link rel="stylesheet" href="../css/6.css" />
  <link href="../css/font-awesome.css" rel="stylesheet" />
</head>

<body>
  <div class="wrapper">
    <nav>
      <input type="radio" name="tab" id="home" checked />
      <input type="radio" name="tab" id="comment" />
      <input type="radio" name="tab" id="envelope" />
      <input type="radio" name="tab" id="heart" />
      <input type="radio" name="tab" id="user" />
      <!-- 注释："for" 属性可把 label 绑定到另外一个元素。请把 "for"
                 属性的值设置为相关元素的 id 属性的值。 -->
      <label for="home" class="home">
        <a href="#">
          <i class="fa fa-home" aria-hidden="true"></i>
          Home
        </a>
      </label>
      <label for="comment" class="comment">
        <a href="#">
          <i class="fa fa-comment" aria-hidden="true"></i>
          Comment
        </a>
      </label>
      <label for="envelope" class="envelope">
        <a href="#">
          <i class="fa fa-envelope" aria-hidden="true"></i>
          Envelope
        </a>
      </label>
      <label for="heart" class="heart">
        <a href="#">
          <i class="fa fa-heart" aria-hidden="true"></i>
          Heart
        </a>
      </label>
      <label for="user" class="user">
        <a href="#">
          <i class="fa fa-user" aria-hidden="true"></i>
          User
        </a>
      </label>
      <div class="tab"></div>
    </nav>
  </div>
</body>

</html>